<template>
  <page-meta
    :page-style="'overflow:' + (Rules ? 'hidden' : 'visible')"
  ></page-meta>
  <view>
    <view
      class="mains"
      :style="{ backgroundColor: pageColor }"
      v-model="activity_detail"
    >
      <!-- canvas -->
      <view class="share-box">
        <view class="posters" :style="{ height: `${deviation + 1100}rpx` }">
          <canvas
            v-if="!load"
            :style="{ height: `${deviation + 1100}rpx` }"
            class="posters-canvas"
            id="share"
            canvas-id="share"
          ></canvas>
        </view>
      </view>
      <view class="this_detail">
        <!-- 自定义tabHeader -->
        <view class="big_img">
          <image :src="activity_detail.cover_url"></image>
          <!-- 自定义返回按钮 -->
          <view
            class="back_btn"
            :style="{ top: `${topHeight}rpx` }"
            @tap="PageBack()"
          >
            <image src="/static/back_btn.png"></image>
          </view>
          <!-- 分享按钮 -->
          <view
            class="share_btn"
            :style="{ top: `${windowHeight + 130}rpx` }"
            @click="share"
            open-type="share"
          >
            <image src="/static/share.png"></image>
          </view>
          <!-- 预售时间 -->
          <view class="sale_time" :style="{ backgroundColor: pageColor }">
            {{ activityList[activity_detail.activity_type].start }} |
            {{ activity_detail[timeName] }}
            {{ activityList[activity_detail.activity_type].end }}
          </view>
          <view
            class="transColor"
            style="position: absolute; bottom: 0; width: 100%; height: 60rpx;"
            :style="{
              backgroundImage: 'linear-gradient(transparent,' + pageColor + ')',
            }"
          ></view>
        </view>

        <view class="detail_content">
          <!-- 活动名称 -->
          <view class="detail_title">{{ activity_detail.activity_name }}</view>
          <!-- 活动发行商 -->
          <view class="detail_host">
            <view class="host_content">
              <view class="host_logo">
                <image :src="activity_detail.brand_info.icon_image"></image>
              </view>
              <view class="host-info">
                <text>{{ activity_detail.brand_info.brand_name }}</text>
                <text>
                  至信链提供技术支持
                </text>
              </view>
            </view>

            <view class="issue_rules" @click="showRules()">
              <text>发行规则</text>
              <image
                src="https://publish.onedaen.com/uploads/publicImg/islink.png"
              ></image>
            </view>
          </view>
          <!-- 活动详情描述 -->
          <view class="detail_text" v-html="activity_detail.description"></view>
        </view>
        <!-- 领取藏品 -->
        <view
          class="appointment"
          v-model="appointment"
          v-show="appointment_show"
        >
          <view class="appointment_title">
            <text class="title1">预约活动领取藏品</text>
            <!-- <text class="title2">限量{{appointment.person_num}}份</text> -->
          </view>
          <view class="appointment_btn" @click="isappointment()">
            <button>{{ appointment }}</button>
          </view>
        </view>
      </view>
      <view class="other_things">
        <view class="other_things_header">
          <view class="header_total">
            本期共{{ activity_detail.all_count }}种藏品
          </view>
          <view class="header_notice">领取藏品需先在“我的”内完成实名认证</view>
        </view>
        <view class="other_things_content">
          <view class="content_grid">
            <view class="content_box">
              <!-- 展示藏品 v-for="(res,index) in collections"-->
              <view
                class="collection_box"
                v-for="(res, index) in collections"
                @click="collectionDetail(res.collection_id)"
                :key="index"
              >
                <view class="box_img">
                  <image :src="res.cover"></image>
                  <view class="box-mask" v-if="(res.inventory === 0)">
                    <image
                      class="mask-img"
                      src="/static/sold-out.png"
                      mode="scaleToFill"
                    />
                  </view>
                </view>
                <view class="box_text">
                  <view class="title">{{ res.name }}</view>
                  <view class="host_name">{{ res.brand_name }}</view>
                  <view class="sale_text">
                    <!-- 限量库存 -->
                    <view class="stock">
                      <view class="counts">限量{{ res.show_number }}份</view>
                      <view class="is_type">第{{ index + 1 }}款</view>
                    </view>
                    <!-- 价格 -->
                    <text class="price"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 无更多藏品显示 -->
          <view class="other-footer" v-show="noMore">
            <view class="line"></view>
            <view class="other-font">没有更多了</view>
            <view class="line"></view>
          </view>
        </view>
      </view>
      <!-- 发行规则弹窗 -->
      <u-popup
        :show="Rules"
        :round="20"
        :customStyle="{ width: '80%', margin: 'auto' }"
        @close="close"
        @open="open"
        mode="center"
        :safeAreaInsetBottom="false"
        :closeOnClickOverlay="true"
      >
        <view class="rules_pop">
          <view class="header" style="text-align: center;">
            <image
              mode="aspectFit"
              style="width: 490rpx; height: 35rpx; margin: auto;"
              src="../../static/issueRule.png"
            ></image>
          </view>
          <view class="content_text">
            <p>发行规则如下：</p>
            <scroll-view
              :scroll-y="true"
              scroll-top="0"
              :show-scrollbar="true"
              style="
                font-size: 26rpx;
                line-height: 40rpx;
                color: #4d4d4d;
                white-space: pre-wrap;
                height: 500rpx;
                text-overflow: ellipsis;
                overflow: scroll;
              "
            >
              {{ activity_detail.rule }}
            </scroll-view>
          </view>
          <view class="close_btn" @click="closeRules()">
            <view>关闭</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'
export default {
  data() {
    return {
      src: 'http://publish.onedaen.com', //图片地址头
      activity_detail: {}, //活动详情
      collections: [], //藏品列表
      // 状态列表
      activityList: {
        5: {
          name: '已开始',
          end: '结束',
          start: '正在发行',
          info: 'end_time',
        },
        6: {
          name: '已结束',
          end: '结束',
          start: '活动结束',
          info: 'end_time',
        },
        7: {
          name: '预热中',
          end: '开始',
          start: '即将发行',
          info: 'sale_time',
        },
      },
      activity_id: '',
      option: {},
      uid: '',
      topHeight: 0,
      token: '',
      canvasImg: '',
      appointment: '预约',
      appointment_show: false,
      Rules: false,
      load: false,
      launch: false,
      noMore: true, //无更多
      saleStatus: '即将发行',
      windowHeight: 0,
      deviation: 0,
      systemWidth: '',
      saleType: '开始',
      // 整体配色
      pageColor: '#375aac',
      overFlow: { overflow: 'hidden' },
      timeName: '',
    }
  },
  onLoad(option) {
    let id = option.id
    this.option = option
    console.log(id)
    this.getActivity(id)
  },
  onShareAppMessage() {
    if (!this.load) return
    return {
      title: this.activity_detail.activity_name,
      path: '/pages/index/index',
    }
  },
  onShareTimeline() {
    return {
      title: this.activity_detail.activity_name,
      query: `id=${this.option.id}`,
      imageUrl: this.canvasImg,
    }
  },
  methods: {
    /* 页面返回 */
    PageBack() {
      uni.navigateBack()
    },
    /* 弹窗开关 */
    open() {
      // console.log('open');
    },
    close() {
      this.show = false
      this.Rules = false
      // console.log('close');
    },
    closeRules() {
      this.Rules = false
    },
    /* 分享按钮 */
    share() {},
    /* 发行规则 */
    showRules() {
      this.Rules = true
    },
    getActivity(id) {
      /* 活动详情 */
      api
        .getActivityDetail({
          activity_id: id,
          uid: getApp().globalData.uid,
          token: getApp().globalData.token,
        })
        .then((res) => {
          uni.getSystemInfo({
            success: (system) => {
              this.systemWidth = system.windowWidth / 375
              this.windowHeight = system.statusBarHeight * 2
            },
          })
          const infos = uni.getMenuButtonBoundingClientRect()
          this.topHeight = infos.top * 2
          console.log('登录信息接口返回:', res)
          this.activity_detail = res.data
          this.timeName = this.activityList[
            this.activity_detail.activity_type
          ].info
          // this.activity_detail.activity_type = 7
          this.collections = res.data.collection_info
          this.activity_id = res.data.activity_id
          this.uid = res.data.id
          this.pageColor = res.data.intro_back
          /* 如果活动需要预约显示预约 */
          if (res.data.is_appointment == 1) {
            this.appointment_show = true
          } else {
            this.appointment_show = false
          }
          let start_time = res.data.start_time
          let end_time = res.data.end_time
          this.transferTime(start_time, end_time)
          console.log(this.collections)
          // this.createdSharePostrs()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 转换时间戳
    transferTime(start_time, end_time) {
      let start = Date.parse(new Date(start_time))
      let end = Date.parse(new Date(end_time))
      let nowTime = Date.parse(new Date())
      console.log(end)
      console.log(nowTime)
      if (start > nowTime) {
        this.saleStatus = '即将发行'
      } else if (end < nowTime) {
        this.saleStatus = '活动结束'
        this.saleType = '结束'
      } else {
        this.saleStatus = '正在发行'
      }
    },
    /* 预约 */
    isappointment() {
      /* 先判断是否登录 */

      api
        .orderActivity({
          uid: this.uid,
          activity_id: this.activity_id,
          token: getApp().globalData.token,
        })
        .then((res) => {
          console.log(res)
          if (res.code == true) {
            uni.showToast({
              title: '预约成功',
            })
            this.appointment = '已预约'
          } else {
            uni.showToast({
              title: '预约失败',
            })
          }
        })
    },
    /* 跳转藏品详情 */
    collectionDetail(id) {
      // const info = uni.getStorageSync('userInfo')
      // if (!info.token) {
      //   uni.showModal({
      //     title: '请登录后查看,是否立即登录',
      //     success: (res) => {
      //       console.log('res', res)
      //       if (res.confirm) {
      //         uni.navigateTo({
      //           url: '/pages/login/login',
      //         })
      //       }
      //     },
      //   })
      //   return
      // }

      if (id == null) {
        uni.navigateTo({
          url: `/pages/details/collection_detail`,
        })
      } else {
        /* 带活动id，藏品id */
        uni.navigateTo({
          url:
            `/pages/details/collection_detail?activity_id=` +
            this.activity_id +
            `&collection_id=` +
            id, //带参数给藏品详情
        })
      }
    },
    // canvas 文字换行
    getTextInfo(canvas, str, size, width) {
      const getRpx = new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success: (system) => {
            resolve(system.windowWidth / 375)
          },
        })
      })
      return getRpx.then((rpx) => {
        // 画布总宽度 rpx单位
        const canvasWidth = width * rpx
        // 字体大小 rpx单位
        let fontSize = parseInt(size * rpx)
        const tempArr = []
        for (let i = 0; i < str.length; i++) {
          const font = str.slice(i, i + 1)
          tempArr.push(font)
        }
        let rowFontNum = 0
        tempArr.reduce((now, next, index) => {
          const fontWidth = canvas.measureText(next).width * rpx
          now = now + fontWidth
          rowFontNum = canvasWidth > now ? index + 1 : rowFontNum
          return now
        }, 0)
        // 每行所需字数 = 画布总宽度 / 单个字体大小
        // let rowFontNum = Math.floor(canvasWidth / fontSize)

        // 字符串总长度
        let strLength = str.length
        // 所需行数 = 字符总长度 / 每行所需字数
        let rows = Math.ceil(strLength / rowFontNum)
        // 行高

        return { canvasWidth, fontSize, rowFontNum, strLength, rows }
      })
    },
    // 生成分享海报啊
    async createdSharePostrs() {
      if (this.launch) return
      uni.showLoading({
        title: '正在生成海报',
        mask: true,
        icon: 'none',
      })
      this.launch = true
      const rpx = parseFloat(this.systemWidth.toFixed(2))
      const context = uni.createCanvasContext('share', this)
      // 居中

      // context.setTextBaseline('middle')
      // 背景色
      context.rect(0 * rpx, 50 * 0, 650 * rpx, 1100 * rpx)
      context.setFillStyle('#fff')
      context.fill()
      // 藏品名称
      context.setTextAlign('left')
      const name = await this.getTextInfo(
        context,
        this.activity_detail.activity_name,
        18,
        160,
      )
      context.setFontSize(name.fontSize)
      context.setFillStyle('#000')
      // context.fillText(this.activity_detail.name, 22.5 * rpx, 360 * rpx)
      for (let i = 0; i <= name.rows; i++) {
        context.fillText(
          this.activity_detail.activity_name.slice(
            name.rowFontNum * (i - 1),
            name.rowFontNum * i,
          ),
          22.5 * rpx,
          (335 + i * 23) * rpx,
        )
      }
      context.setTextAlign('center')

      const lineHeight =
        name.rows - 1 >= 2 ? (name.rows - 1) * 21 : (name.rows - 1) * 20
      this.deviation = lineHeight * 2

      // 小程序码
      const code = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: 'https://publish.onedaen.com/uploads/material/picture/code.jpg',
          success: (res) => {
            context.drawImage(
              res.tempFilePath,
              230 * rpx,
              (425 + lineHeight) * rpx,
              64 * rpx,
              64 * rpx,
            )
            // 长按识别
            context.setTextAlign('left')
            context.setFontSize(10 * rpx)
            context.setFillStyle('#999')
            context.fillText(
              '长按识别，期待与您',
              215 * rpx,
              (505 + lineHeight) * rpx,
            )
            context.fillText(
              '一起见证本次活动!',
              218 * rpx,
              (520 + lineHeight) * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 预览图
      const preview = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.activity_detail.cover_url,
          // 发行时间背景
          success: (res) => {
            // const day = new Date()

            context.drawImage(
              res.tempFilePath,
              0 * rpx,
              0 * rpx,
              325 * rpx,
              325 * rpx,
            )

            context.beginPath()
            context.moveTo(3 * rpx, 300 * rpx)
            context.arcTo(193 * rpx, 300 * rpx, 193 * rpx, 325 * rpx, 3 * rpx)
            context.lineTo(193 * rpx, 325 * rpx)
            context.lineTo(0 * rpx, 325 * rpx)
            context.arcTo(0 * rpx, 300 * rpx, 193 * rpx, 300 * rpx, 3 * rpx)
            context.setStrokeStyle('rgba(0, 0, 0, 0.8)')
            context.fillStyle = 'rgba(0, 0, 0, 0.8)'
            context.fill()
            context.stroke()
            context.setFontSize(12 * rpx)
            context.setFillStyle('#fff')
            context.setTextAlign('center')
            const timeName = this.activityList[
              this.activity_detail.activity_type
            ].info
            context.fillText(
              // activityList
              `${
                this.activityList[this.activity_detail.activity_type].start
              } | ${this.activity_detail[timeName]} ${
                this.activityList[this.activity_detail.activity_type].end
              }`,
              95 * rpx,
              317 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 智信链logo
      const logo = new Promise((resolve, reject) => {
        // https://publish.onedaen.com/uploads/material/picture/zxl_yde.png
        uni.downloadFile({
          url:
            'https://publish.onedaen.com/uploads/material/picture/zxl_yde.png',
          success: (res) => {
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (495 + lineHeight) * rpx,
              130 * rpx,
              25 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 发行商头像
      const avatar = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.activity_detail.brand_info.icon_image,
          success: (res) => {
            context.beginPath()
            context.arc(
              32.5 * rpx,
              (422.5 + lineHeight) * rpx,
              12.5 * rpx,
              0,
              2 * Math.PI,
            )
            context.save()
            context.clip()
            context.setStrokeStyle('rgba(0,0,0,1)')
            context.stroke()
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (410 + lineHeight) * rpx,
              25 * rpx,
              25 * rpx,
            )
            context.draw(true)
            context.restore()
            resolve()
          },
        })
      })
      // 限量
      context.beginPath()
      context.moveTo(22 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.arcTo(
        20 * rpx,
        (400 + lineHeight) * rpx,
        20 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        20 * rpx,
        (380 + lineHeight) * rpx,
        22 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#53A8E8')
      context.fillStyle = '#53A8E8'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.fillText('限量', 40 * rpx, (394.5 + lineHeight) * rpx)
      // context.fillText('限量', 20 * rpx, (380 + lineHeight) * rpx)
      this.activity_detail.total_show_number =
        this.activity_detail.total_show_number + ''
      const countLength = this.activity_detail.total_show_number.length - 1
      const countWidth = parseInt((100 + countLength * 7) * rpx)

      // 发行数量
      context.beginPath()
      context.setTextAlign('center')
      context.moveTo(60 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        countWidth,
        (380 + lineHeight) * rpx,
        countWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth,
        (400 + lineHeight) * rpx,
        60 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.setStrokeStyle('#53A8E8')
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#53A8E8')
      console.log('countWidth', countWidth)
      context.fillText(
        `${this.activity_detail.total_show_number}份`,

        60 * rpx + (countWidth - 60 * rpx) / 2,
        (394.5 + lineHeight) * rpx,
      )

      // this.activity_detail.collect_type_count =
      //   this.activity_detail.collect_type_count + ''
      const collectionLength = (
        this.activity_detail.collection_info.length -
        1 +
        ''
      ).length
      const collectionWidth = parseInt(
        countWidth + (50 + collectionLength * 8 * rpx),
      ) // 150

      // 藏品款数
      context.beginPath()
      context.moveTo(countWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        collectionWidth,
        (380 + lineHeight) * rpx,
        collectionWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        countWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#000')
      context.fillStyle = '#000'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')

      // context.fillText(
      //   `共${this.activity_detail.collection_info.length}款`,
      //   countWidth + 16 * rpx,
      //   (394.5 + lineHeight) * rpx,
      // )
      context.fillText(
        `共${this.activity_detail.collection_info.length}款`,
        countWidth + 10 * rpx + (collectionWidth - (countWidth + 10 * rpx)) / 2,
        (394.5 + lineHeight) * rpx,
      )
      // 标签
      context.setTextAlign('center')
      const flagLength = this.activity_detail.flag_name.length - 1
      const flagWidth = parseInt(collectionWidth + (40 + flagLength * 12 * rpx)) // 200
      context.beginPath()
      context.moveTo(collectionWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        flagWidth,
        (380 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        flagWidth,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        collectionWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('rgba(0,0,0,0)')

      const color = context.createLinearGradient(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
      ) //(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y)
      color.addColorStop(0, '#d8a0d8') //起点位置的颜色
      color.addColorStop(0.41, '#a4bbe5') //中间点位置的颜色
      color.addColorStop(1, '#cdffd7') //终点位置的颜色
      context.fillStyle = color
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#000')
      // context.fillText(
      //   this.activity_detail.flag_name,
      //   collectionWidth + 20 * rpx,
      //   (394.5 + lineHeight) * rpx,
      // )
      const startFlag = collectionWidth + 10 * rpx
      context.fillText(
        this.activity_detail.flag_name,
        startFlag + (flagWidth - startFlag) / 2,
        (394.5 + lineHeight) * rpx,
      )

      // 发行商名称
      context.setTextAlign('left')
      context.setFontSize(15 * rpx)
      context.setFillStyle('#666666')
      context.fillText(
        this.activity_detail.brand_info.brand_name,
        60 * rpx,
        (428 + lineHeight) * rpx,
      )
      context.save()
      context.draw(true)
      Promise.all([code, preview, logo, avatar]).then(() => {
        uni.canvasToTempFilePath({
          // 这里修改保存的图片格式
          fileType: 'jpg',
          canvasId: 'share',
          quality: 1,
          success: (res) => {
            this.canvasImg = res.tempFilePath
            this.load = true
            uni.hideLoading()
            this.share()
          },
        })
      })
    },
    // 分享
    async share() {
      if (!this.load) {
        await this.createdSharePostrs()
      } else {
        uni.showLoading({
          title: '正在生成海报',
          mask: true,
          icon: 'none',
        })
        const timer = setTimeout(() => {
          if (this.load) {
            uni.showShareImageMenu({
              path: this.canvasImg,
              complete: (res) => {
                uni.hideLoading()
                clearTimeout(timer)
              },
            })
            // uni.canvasToTempFilePath({
            //   // 这里修改保存的图片格式
            //   fileType: 'jpg',
            //   canvasId: 'share',
            //   quality: 1,
            //   success: (res) => {
            //     // 保存带哦本地
            //     uni.showShareImageMenu({
            //       path: this.canvasImg,
            //     })
            //   },
            //   complete: (res) => {
            //     uni.hideLoading()
            //     clearInterval(timer)
            //   },
            // })
          }
        }, 500)
      }
    },
  },
}
</script>

<style lang="scss">
.mains {
  color: #e2ebff;
}
/* this_detail */
.big_img {
  width: 100%;
  height: 750rpx;
  position: relative;
  background-color: #fff;
  .sale_time {
    position: absolute;
    bottom: -5rpx;
    left: 30rpx;
    font-weight: bold;
    height: 60rpx;
    line-height: 50rpx;
    text-align: center;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    padding: 0 17rpx;
    font-size: 24rpx;
    color: #ffffff;
    z-index: 1;
    letter-spacing: 2rpx;
  }

  .back_btn {
    position: fixed;
    z-index: 2;
    top: 100rpx;
    left: 30rpx;
    width: 56rpx;
    height: 56rpx;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.5);

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_btn {
    position: absolute;
    top: 200rpx;
    right: 30rpx;
    width: 56rpx;
    height: 56rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}

/* 活动详情描述 */
.detail_content {
  display: flex;
  flex-direction: column;
  width: 690rpx;
  margin: auto;
  padding-bottom: 40rpx;

  .detail_title {
    font-family: PingFang-SC-Medium;
    margin-top: 20rpx;
    font-size: 36rpx;
    font-weight: normal;
    font-stretch: normal;
    word-break: break-all;
    line-height: 42rpx;
    letter-spacing: 0rpx;
    color: #ffffff;
    padding-bottom: 30rpx;
  }

  .detail_host {
    display: flex;
    justify-content: space-between;
    // margin-top: 30rpx;
    padding: 30rpx 0;
    /* 这里线颜色和字体颜色统一 */
    border-bottom: 1rpx solid rgba(67, 109, 206, 0.8);
    border-top: 1rpx solid rgba(67, 109, 206, 0.8);

    .host_content {
      display: flex;
      align-items: center;
      .host_logo {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;

        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      .host-info {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        text {
          line-height: 100%;
          font-size: 30rpx;

          color: #e2ebff;
          vertical-align: middle;
          &:last-child {
            font-size: 18rpx;
            margin-top: 13rpx;
            color: rgba(245, 245, 245, 0.6);
          }
        }
      }
    }

    .issue_rules {
      display: flex;
      font-size: 24rpx;
      line-height: 70rpx;
      padding: 0 10rpx;
      text {
        color: #e2ebff;
      }
      image {
        width: 25rpx;
        height: 25rpx;
        margin: 24rpx 10rpx;
      }
    }
  }

  .detail_text {
    font-family: PingFang-SC-Regular;
    white-space: pre-wrap;
    margin-top: 36rpx;
    font-size: 30rpx;
    font-weight: 300;
    line-height: 50rpx;
    letter-spacing: 0rpx;
    color: #e2ebff;
    padding-bottom: 40rpx;
    word-break: break-all;
    border-bottom: 1rpx solid rgba(67, 109, 206, 0.8);
  }
}

/* 预约活动 */
.appointment {
  display: flex;
  justify-content: space-between;
  height: 160rpx;
  width: 90%;
  margin: 40rpx auto 0 auto;

  border-radius: 30rpx;
  background-color: burlywood;

  .appointment_title {
    display: flex;
    flex-direction: column;

    text {
      margin: 20rpx 30rpx;
    }

    .title1 {
      font-size: 36rpx;
      font-weight: bold;
    }

    .title2 {
      font-size: 24rpx;
    }
  }

  .appointment_btn {
    height: 60rpx;
    width: 150rpx;
    margin: 50rpx;

    button {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
      line-height: 60rpx;
      color: #323232;
      background-image: linear-gradient(300deg, #b5b593 8%, #f4f0d5 100%),
        linear-gradient(#ebe478, #dadcae);
    }
  }
}

.other_things {
  width: 690rpx;
  margin: auto;

  .other_things_header {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #e2ebff;
    padding-bottom: 35rpx;
  }

  .content_title {
    font-family: PingFang-SC-Regular;
    font-size: 28rpx;
    padding: 45rpx 0;
    color: #ffffff;
  }

  .content_grid {
    .content_box {
      display: flex;
      flex-wrap: wrap;
      grid-template-columns: repeat(auto-fill, 50%);
      /** 平铺宽度 */
      grid-template-rows: auto;
      /** 设置高度为  */
      grid-auto-rows: auto;
      /** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */

      /** 水平居中  */
      align-items: center;

      .collection_box {
        width: 335rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
        background-color: #091227;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;
        .box_img {
          position: relative;
          width: 335rpx;
          height: 335rpx;
          border-radius: 20rpx 20rpx 0 0;

          .img2 {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
          }
          .box-mask {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            background-color: rgba(9, 18, 39, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            .mask-img {
              width: calc(316rpx / 2);
              height: calc(316rpx / 2);
            }
          }
          image {
            border-radius: 20rpx 20rpx 0 0;
            width: 100%;
            max-height: 100%;
            max-width: 100%;
            object-fit: none;
          }
        }

        .box_text {
          width: 90%;
          margin: auto;
          padding: 20rpx 0;
          .title {
            width: 300rpx;
            font-family: PingFang-SC-Medium;
            font-size: 30rpx;
            word-break: break-all;
            color: #ffffff;
            height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }

          .host_name {
            font-size: 30rpx;
            color: #fff;
          }

          .sale_text {
            display: flex;
            justify-content: space-between;

            .stock {
              display: flex;
              justify-content: space-between;
              margin-top: 20rpx;
              font-size: 24rpx;
              background-color: #53a8e8;
              height: 40rpx;
              min-width: 180rpx;
              max-width: 250rpx;
              border-radius: 5rpx;

              .counts {
                color: #fff;
                margin-left: 5rpx;
                line-height: 40rpx;
                display: flex;
                align-items: center;
              }

              .is_type {
                min-width: 80rpx;
                text-align: center;
                line-height: 40rpx;

                color: #53a8e8;
                background-color: #091227;
                border-radius: 5rpx;
                border: solid 0.5px #53a8e8;
              }
            }
          }
        }
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
  .other-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 82rpx 0 calc(254rpx / 2);
    font-size: 24rpx;
    color: rgba(245, 245, 245, 0.6);
    .other-font {
      padding: 0 18rpx 0;
    }
    .line {
      height: 1.5rpx;
      width: 50rpx;
      // background: linear-gradient(to right, #181816, #4effff, #181816);
      background-image: linear-gradient(
        to right,
        rgba(245, 245, 245, 0),
        rgba(245, 245, 245, 0.6)
      );
      &:last-child {
        background-image: linear-gradient(
          to right,
          rgba(245, 245, 245, 0.6),
          rgba(245, 245, 245, 0)
        );
      }
    }
  }
}

/* 规则弹框 */
.rules_pop {
  background-color: #ffffff;
  width: 90%;
  margin: auto;

  .header {
    font-size: 33rpx;
    letter-spacing: 2rpx;
    color: #1a1a1a;
    text-align: center;
    margin: 30rpx 0;
  }

  .content_text {
    p {
      font-size: 26rpx;
      line-height: 40rpx;
      color: #4d4d4d;
    }
  }

  .close_btn {
    width: 167rpx;
    margin: 50rpx auto 20rpx;
    height: 65rpx;
    line-height: 60rpx;
    background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    border-radius: 32rpx;
    color: #000;
    text-align: center;
    font-size: 26rpx;
    font-weight: bold;
    // button {
    //   min-width: 150rpx;
    //   max-width: 180rpx;
    //   margin: auto;
    //   font-size: 26rpx;
    //   height: 60rpx;

    //   line-height: 60rpx;
    //   font-weight: bold;
    //   background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
    //     linear-gradient(#dcb71a, #dcb71a);
    //   background-blend-mode: normal, normal;
    //   border-radius: 32rpx;
    // }
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  /deep/::-webkit-scrollbar {
    display: block !important;
    width: 5rpx !important;
    height: 5rpx !important;
    background-color: #f5f5f5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #fff;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
  }
}
.share-box {
  left: -100%;
  top: -100%;
  position: fixed;
  height: 100vh;
  width: 100vw;
  .share-icon {
    font-size: 30rpx;
    position: absolute;
    bottom: 100rpx;
    left: 355rpx;
    background-color: #1a1a1a;
    color: #999;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    padding: 10rpx;
  }
  .share-list {
    position: absolute;
    width: 650rpx;
    left: 50rpx;
    top: 1100rpx;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    .share-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 13rpx;
      .share-menu {
        width: 85rpx;
        height: 85rpx;
        border-radius: 20rpx;
        background-color: #fff;
      }
      ::v-deep button {
        font-size: 13rpx !important;
        background-color: transparent;
        padding: 0;
        color: #fff;
      }
      &:first-child {
        justify-content: center;
        font-size: 30rpx;
      }
    }
  }

  // 分享海报
  .posters {
    width: 650rpx;
    height: 1065rpx;
    border-radius: 20rpx;
    // overflow: hidden;
    margin: 0 50rpx;
    position: relative;
    z-index: 1;
    .posters-canvas {
      width: 650rpx;
      height: 1065rpx;
      margin: 0 auto;
      // background-color: fff;
    }
  }
}
</style>
